import React, { useState, useEffect } from 'react'
import "./Test.less"
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import { useLocation } from 'react-router-dom'
import Fill from './Fill/Fill'
import Choice from './Choice/Choice'
import { TiMuApi } from "@/request/api"
export default function Test() {

    let location = useLocation()
    // console.log(location.state);
    let [num, setNum] = useState(1)
    // console.log(location);
    let [list, setList] = useState<IQuesData[]>([])
    //辅助变量
    let CT = ["one", "check", "many"]

    const getQues = async () => {
        let res = await TiMuApi({
            actionCode: location.state.actionCode,
            questionType: location.state.questionType,
            testNum: location.state.testNum,
            testType: location.state.testType
        })
        console.log(res);
        setList(res.data)
    }

    useEffect(() => {
        getQues()
    }, [])

    return (
        <div className='test'>
            <div className="title">
                <span>{num}</span>/{list.length}
            </div>
            <Swiper
                onSlideChange={(v) =>
                    setNum(v.activeIndex + 1)
                }>
                {
                    list.map((item, index) => {
                        return (
                            <SwiperSlide key={index}>
                                {CT.includes(item.questionType) ? <Choice data={item}></Choice> : <Fill data={item}></Fill>}
                            </SwiperSlide>
                        )
                    })
                }
            </Swiper>
            {/* <Choice></Choice>
            <Fill></Fill> */}
        </div>
    )
}
